<template>
  <!-- 歌单详情页 -->
  <div>
    <top-bar :playList="state.playList"></top-bar>
  </div>
</template>

<script>
import TopBar from "@/components/item_music/TopBar.vue";
// getPlayList
import { getPlayList } from "@/api/itemMusic";
// 导入两种路由
import { useRoute } from "vue-router";
// 导入挂载生命周期对象
import { onMounted } from "vue";
import { reactive } from "vue";

export default {
  components: {
    TopBar,
  },

  setup() {
    const $route = useRoute();
    // 创建一个可变的 state
    let state = reactive({
      playList: {},
    });
    onMounted(async () => {
      // console.log("$route.query.id", $route.query.id);
      const { data: res } = await getPlayList($route.query.id);
      state.playList = res.playlist;
      //   playList=res.
    });

    return {
      state,
    };
  },
};
</script>

<style lang="less" scoped>
</style>